<template>
	<hyb-page title="添加地址">
		<!-- 请开始您的开发 ~ -->
		<template v-slot:body>
			<view class="gui-padding">
				<view class="gui-margin-top gui-flex gui-row gui-space-between gui-align-items-center">
					<text class="gui-h5 gui-color-gray">添加地址</text>
					<view @tap="goback" hover-class="gui-tap">
						<text class="gui-block gui-primary-color gui-text gui-icons">&#xe616; 返回列表</text>
					</view>
				</view>
				<view class="gui-margin-top">
					<form @submit="formSubmit" class="gui-form">
						<view class="gui-margin-top">
							<text class="gui-text-small gui-color-gray">您的姓名</text>
						</view>
						<view class="gui-border-b">
							<input type="text" class="gui-form-input" v-model="formData.d_uname"
								placeholder="请填写联系姓名" />
						</view>
						<view class="gui-margin-top">
							<text class="gui-text-small gui-color-gray">联系电话</text>
						</view>
						<view class="gui-border-b">
							<input type="number" class="gui-form-input" v-model="formData.d_phone"
								placeholder="请填写联系电话">
						</view>

						<!-- 汽车行业车主信息 -->
						<view v-if="base.che_hang">
							<view class="gui-margin-top">
								<text class="gui-text-small gui-color-gray">车牌号：</text>
							</view>

							<view class="gui-border-b">
								<input type="text" class="gui-form-input" v-model="formData.che_pai"
									placeholder="请填写车牌号" />
							</view>
							<view class="gui-margin-top">
								<text class="gui-text-small gui-color-gray">车型：</text>
							</view>

							<view class="gui-border-b">
								<input type="text" class="gui-form-input" v-model="formData.che_xing_hao"
									placeholder="请填写车型" />
							</view>
						</view>

						<view v-if="base.show_base.di_tu_xs == 0" class="gui-form-item gui-border-b gui-padding">
							<text class="gui-form-label gui-secondary-text">所在地</text>
							<view class="gui-form-body">
								<hyb-city @change="changeAddress" v-model="formData.d_address"></hyb-city>
							</view>
						</view>
						<view v-if="base.show_base.di_tu_xs == 1" class="gui-margin-top">
							<text class="gui-text-small gui-color-gray gui-icons">所在地区</text>
						</view>
						<view v-if="base.show_base.di_tu_xs == 1" class="gui-border-b">
							<!-- <input @tap="openPicker" type="text" class="gui-form-input gui-icons" v-model="formData.d_address" disabled
								placeholder="请选择所在地区"> -->
							<hyb-city @setting="onSetting" :flag="true" :tag="1" @change="addressChange"
								v-model="formData.d_address"></hyb-city>
						</view>
						<!-- <view class="gui-margin-top">
							<text class="gui-text-small gui-color-gray">详细地址</text>
						</view> -->
						<view style="padding-top:15rpx;">
							<input type="text" class="gui-form-input" v-model="formData.d_xxaddress"
								placeholder="请填写详细地址">
						</view>



						<view style="padding-top:15rpx; " class="gui-flex gui-align-items-center" >
							<text class="gui-text-small gui-color-gray gui-icons">默认地址：</text>
							<radio-group :value="formData.d_checked" style="margin-top: -10rpx;">
								<radio class="gui-check-item" @tap="setChecked()" :checked="formData.d_checked == 1"
									:value="1"></radio>
							</radio-group>
						</view>


						<hyb-button label="提 交" @tap="formSubmit"></hyb-button>
						<!-- <view class="gui-margin-top gui-padding">
							<button type="default" @tap="formSubmit" class="gui-button gui-bg-primary gui-noborder">
								<text class="gui-color-white gui-button-text">提 交</text>
							</button>
						</view> -->
						<gui-area-picker :value="items" ref="graceAddressPicker"
							@confirm="areaConfirm"></gui-area-picker>
					</form>
				</view>
			</view>
		</template>
	</hyb-page>
</template>

<script>
	import graceChecker from "@/Grace6/js/checker.js";
	export default {
		data() {
			return {
				items: ['', '', ''],
				area: '',
				formData: {
					d_checked: 0
				},
			}
		},
		computed: {
			base: () => {
				return uni.storage.get("base");
			}
		},
		onLoad(options) {

			if (options.id) {
				uni.gPost("address/info", {
					id: options.id
				}).then((info) => {
					this.formData = info;
					if (info.d_address) {
						this.items = info.d_address.split("-");
						console.log(this.items)
					}
				})
			}
		},
		methods: {

			setChecked() {
				this.formData.d_checked = this.formData.d_checked == 0 ? 1 : 0
			},

			onSetting() {
				uni.reLaunch({
					url: "/hyb_o2o/address/add"
				})
			},

			changeAddress(res) {
				console.log(res)
			},

			addressChange(res) {
				console.log(res)

				if (res.latitude) {
					this.formData.lat1 = res.latitude + "";
					this.formData.lon1 = res.longitude + "";
				}
				this.formData.d_address = res.address;
			},
			// 表单提交
			formSubmit() {
				var rule = [{
						name: "d_uname",
						checkType: "string",
						checkRule: "1,10",
						errorMsg: "姓名1-10个字符"
					},
					{
						name: "d_phone",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: "请正确填写手机号"
					},
					// {
					// 	name: "d_address",
					// 	checkType: "string",
					// 	checkRule: "1,100",
					// 	errorMsg: "请选择所在地区"
					// },
					{
						name: "d_xxaddress",
						checkType: "string",
						checkRule: "1,100",
						errorMsg: "请正确填写详细地址"
					}
				];
				var checkRes = graceChecker.check(this.formData, rule);
				if (checkRes) {
					uni.gPost("address/save", this.formData).then((info) => {
						uni.gJs.back();
					})
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			openPicker: function() {
				this.$refs.graceAddressPicker.open();
			},
			areaConfirm: function(e) {
				// 返回选中城市的编号及文本信息
				console.log(e);
				this.formData.d_address = e.names[0] + '-' + e.names[1] + '-' + e.names[2];
				this.items = e.names;
			},
			goback: function() {
				// 返回跳转

				uni.gJs.back();
			},

		}
	}
</script>

<style>

</style>